<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 基础题库 -->
        <!-- 头部新增 -->
  <el-row :gutter="20" type="flex" class="row-bg headrow" justify="space-between">
       <!-- 左侧查询学科 -->
   <el-col :span="21">
     <el-link type="danger" disabled>说明: 目前支持学科和关键条件筛选</el-link>
      </el-col>
      <!-- 右侧新增学科 -->
    <el-col :span="3">
      <div class="grid-content bg-purple">
          <el-button type="success" icon="el-icon-edit" @click="addbasequsetion">新增试题</el-button>
      </div>
      </el-col>
</el-row>
       <!-- 搜索表单列表 -->
       <SearchForm></SearchForm>
        <!-- 警告栏 -->
      <el-alert
        type="info"
        show-icon
         :closable="false"
        >
        <template slot="title">
      <span>
      数据一共{{counts}}条
      </span>
    </template>
      </el-alert>

      <!-- 表格 -->
          <el-table
      :data="questionsform"
      style="width: 100%">

      <el-table-column
        prop="number"
        label="试题编号"
       >
      </el-table-column>
      <el-table-column
        prop="subjectName"
        label="学科">
      </el-table-column>
       <el-table-column
        prop="directoryName"
        label="目录">
      </el-table-column>
       <el-table-column
        prop="questionType"
        label="题型">
      </el-table-column>
       <el-table-column

        label="题干">

         <template slot-scope="scope">
          <p v-html="scope.row.question"></p>
        </template>

      </el-table-column>
       <el-table-column
        prop="addDate"
        label="录入时间">
      </el-table-column>
<el-table-column
        prop="difficulty"
        label="难度">
      </el-table-column>
      <el-table-column
        prop="creator"
        label="录入人">
      </el-table-column>
       <!-- 操作 -->
        <el-table-column label="操作" width="250px">
      <template slot-scope="scope">
<!-- 查看 -->
<el-button type="primary" icon="el-icon-view" plain circle @click="getquestion(scope.row)"></el-button>
<!-- 编辑 -->
  <el-button type="success" icon="el-icon-edit"  plain circle  @click="updatequestion(scope.row)"></el-button>
  <!-- 删除 -->
  <el-button type="danger" icon="el-icon-delete"  plain circle  @click="deletequestion(scope.row)"></el-button>
    <!-- 成功 -->
  <el-button type="warning" icon="el-icon-check"  plain circle  @click="successquestion(scope.row)"></el-button>

      </template>
    </el-table-column>
    </el-table>

       <!-- 分页器 -->
     <el-row type="flex" justify="end" >
    <el-pagination
   background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"

      :page-sizes="[5, 10, 20, 50]"
      :page-size="data.pagesize"
      :current-page="data.page"

       layout=" prev, pager, next, sizes, jumper"
      :total="counts">
    </el-pagination>
</el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
import SearchForm from './questions-searchform.vue'
import { list } from '@/api/hmmm/questions'
import { list as cataloglist } from '@/api/hmmm/directorys'
import { mapActions } from 'vuex'
// 格式化时间
import { crtTimeFtt } from '@/filters'
export default {
  created () {
    // 获取所有学科列表
    this.getsubjectlist()
    // 获取所有目录列表
    this.getcataloglist()
    // 获取所有基础试题
    this.getquestionlist()
  },
  components: {
    SearchForm
  },
  data () {
    return {
      // 表单数据
    //   form: {
    //     subjectID: '',
    //     catalogID: '',
    //     tags: '',
    //     keyword: '',
    //     questionType: '',
    //     difficulty: '',
    //     direction: '',
    //     creatorID: '',
    //     remarks: '',
    //     shortName: '',
    //     city: '',
    //     province: ''

      //   },
      counts: 10,
      // 表格数据
      questionsform: [{
        number: '', // 试题编号
        subjectID: '', // 学科id
        catalogID: '', // 目录
        question: '', // 题干
        addDate: '', // 录入时间
        difficulty: '', // 难度
        creator: '', // 录入人
        questionType: '', // 题型
        subjectName: '',
        directoryName: ''
      }],
      data: {
        pagesize: 10,
        page: 1
      },
      catalog: [],
      subjects: this.$store.state.subjectlist.subjectData

    }
  },
  methods: {
    ...mapActions('subjectlist', ['getcataloglist', 'getsubjectlist']),
    // 获取所有目录的列表
    async getcataloglist () {
      const res = await cataloglist()
      this.catalog = res.data.items
    //   console.log(this.catalog)
    },
    // 获取所有基础题库列表
    async getquestionlist () {
      const res = await list(this.data)
      //   console.log(res)

      res.data.items.forEach(obj => {
        // 处理时间

        obj.addDate = crtTimeFtt(obj.addDate)
        // 处理学科subjectName
        this.subjects.forEach(item => {
          if (obj.subjectID === item.id) {
            obj.subjectName = item.subjectName
          }
        })
        // 处理目录directoryName
        this.catalog.forEach(item => {
          if (obj.catalogID === item.id) {
            obj.directoryName = item.directoryName
          }
        })
        // 难度
      })
      //   console.log(res.data.items)
      this.questionsform = res.data.items
    },
    // 新增基础题
    addbasequsetion () {},
    // 查看
    getquestion () {},
    // 编辑
    updatequestion () {},
    // 更新
    deletequestion () {},
    // 成功
    successquestion () {},
    // 更改页面大小
    handleSizeChange () {},
    // 更改当前页
    handleCurrentChange () {}
  }

}
</script>

<style scoped>
.headrow{
    margin-bottom:10px ;
    }
.colflex{
    display: flex;
}
</style>
